<!-- PlanItem -->
<template>
  <!-- :id="`id-${id}`" -->
  <view
    class="PlanItem vm"
    :class="{ check, customClass }"
    @click="handleClick"
  >
    <view class="flex flex-bottom mb10">
      <view class="fb fs26">{{ time }}</view>
      <view class="flex-right">
        <span class="price fs26">¥{{ price }}</span>
        <span class="fc8 fs22">起</span>
      </view>
    </view>
    <view class="flex flex-bottom fc8">
      <view class="sc fs22 mr10">{{ end }}散场</view>
      <view class="desc fs22 flex-right">{{ desc }}</view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'PlanItem',
    props: {
      time: String,
      desc: String,
      end: String,
      customClass: {
        type: String,
        default: 'vm'
      },
      item: {
        type: Object
      },
      // id: [String, Number],
      price: [String, Number],
      check: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {}
    },
    methods: {
      handleClick() {
        console.log(this.item, '-=-=')
        this.$emit('change', this.item)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .PlanItem {
    // padding-top: 5rpx;
    min-width: 260rpx;
    height: 110rpx;
    margin-right: 20rpx;
    // text-align: center;
    border-radius: 10rpx;
    border: 1rpx solid #e0e0e0;
    box-sizing: border-box;
    padding: 10rpx 16rpx;
    .time {
      font-size: 30rpx;
      color: #000;
      font-weight: bold;
    }

    .sc {
      //字节view属性默认white-space:normal
      // #ifdef MP-TOUTIAO
      white-space: nowrap;
      // #endif
    }
    .desc {
      // #ifdef MP-TOUTIAO
      white-space: nowrap;
      // #endif
      font-size: 20rpx;
      color: #888;
      margin-top: 0 !important;
    }

    .price {
      color: $yellow;
      font-size: 20rpx;
      span {
        font-size: 24rpx;
        margin-left: 5rpx;
      }
    }
    &.check {
      border: 1rpx solid $mainColor;
    }
  }
  .vm {
    display: inline-block;
    vertical-align: middle;
  }
</style>
